<template>
  <li :class="computedClass" @click="onClick">
    <slot name="img">
      <span>
        <template v-if="isMultiple">
          <input type="checkbox" read-only :checked="active" />
        </template>
        <slot> {{ value }}</slot>
      </span>
    </slot>
  </li>
</template>

<script>
export default {
  name: "tinyOption",
  props: {
    value: {},
    label: {},
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    computedClass() {
      let classNames = [];
      if (this.active) classNames.push("active");
      if (this.selected) classNames.push("selected");
      if (this.disabled) classNames.push("disabled");
      return classNames.join(" ");
    },
    isMultiple() {
      return this.$parent.multiple;
    },
  },
  mounted() {
    if (this.value === this.$parent.value) this.$parent.changeValue(this);
  },
  data() {
    return {
      active: false,
      selected: false,
      isOption: true,
    };
  },
  methods: {
    onClick(e) {
      this.$parent.onClick(this);
    },
  },
};
</script>